<script setup>

//npm install vue-router 
  import {useRouter} from 'vue-router'
  //useRouter可以创建一个新的路由对象，触发路由跳转，实现编程路由！
  var router = useRouter();
 

  let jumpList=()=>{
    //router.push(`/list?id=1&name=root`);
    //router.push({path:"/list"});
    //list?id=1&name=root
    router.push({path:"/list",query:{id:1,name:'root'}});
  }


  let jumpDetail =()=>{
    //router.push('/detail/3/4')
    //追加到路径动态参数位置  path:"/detail/:typeid/:id"
    //params和path式互斥的！ 不能同时存在 
    //params 给路由起别名name -》 name
    router.push({name:"erdaye",params:{typeid:5,id:6}})
  }
</script>

<template>
  <div>

    <!-- 跳转list使用query传递参数 ？key=value 
         id=1&name=root
    -->
     <button @click="jumpList()">跳转到list</button>
     <!-- 视图标签 -->
     <router-link to="/list?id=1&name=root">list</router-link> ||
     <!-- 必须添加  ：to  -->
     <router-link :to="{path:'/list',query:{id:1,name:'root'}}">list</router-link>
    <hr>
     <!-- 跳转detail使用param路径传递参数
          /detail/typeid1/id1
          1. 路径本身就动态的[修改router.js]   path:"/detail/:typeid/:id",  == springmvc {typeId}/{id}
          方案1： 直接拼接路径即可 2. 使用router-link | router.push路径传参 

    <!-- 准备vue的显示区域
        router-view -》 展示跳转的vue组件
        默认路由视图，点击的时候，子此处打开！默认路由视图只能有一个
    -->

    <router-link to="/detail/2/1">list</router-link> ||
    <router-link :to="{name:'erdaye',params:{typeid:7,id:8}}">list</router-link> ||
    <button @click="jumpDetail()">跳转到detail</button>

    <router-view></router-view>

  </div>
</template>

<style scoped>

</style>